<script setup>
import {onMounted, ref} from 'vue'
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  NTabPane,
  NTabs,
  NImage,
  NUpload,
  useMessage,
  NLayout,
  NLayoutContent, NSelect, NTag, NFlex, NAvatar, NDrawer, NDrawerContent, NEmpty, NSpin, NScrollbar, NCard
} from 'naive-ui'
import {useI18n} from 'vue-i18n'
import CommonPage from '@/components/page/CommonPage.vue'
import {useUserStore} from '@/store'
import api from '@/api'
import {getToken, is, renderIcon} from '~/src/utils'
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
import TheIcon from "@/components/icon/TheIcon.vue";
import * as XLSX from 'xlsx';

const {t} = useI18n()
const userStore = useUserStore()
const base_path = import.meta.env.VITE_BASE

const message = useMessage()

const data = reactive({
  select_customer: {
    user_id:'',
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0,
      free:0,
    }
  },
  select_customer_new: {
    user_id:'',
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0,
      free:0,
    }
  },
  order_list: [],
  card_loading: false,
  orders: [],
  orders_delete:[],
  keyword: '',
  config: [],
  show_detail: false,
  pay: false,
  uploadAction: base_path + '/system/base/userimg',
  token: getToken(),
  payForm: {
    id: 0,
    order_id: 0,
    pay_type: 3,
    images: [],
    images_pc: [],
    fkfs: [],
    money: 0,
    cdp:0,
    weimei:0,
    free:0,
  },
  show_give: false,
  giveForm: {
    type: 1,//0.划扣卡记录id1.储值2.积分3.优惠券
    projectstat_id: 0,
    old_user_id: null,
    new_user_id: null,
    project_id: 0,
    remark: "",
    fjq_ids: []
  },
  tkForm: {
    order_id:0,
    type: 1,
    user_id: 0,
    select_tk_projects: [],
    total_price:0,
    remark: "",
  },
  freeForm:{
    user_id:null,
    nums:null,
    type:4,
    use_type:1
  },
  togetherForm: {
    before_user_id: null,
    before_user_name: null,
    before_user_phone: null,
    before_user_card_no: null,
    after_user_id: null,
  },
  mode_fkfs: false,
  fkfsForm: {
    id: 0,
    fkfs: [],
    order_id: 0
  },
  show_delete:false,
  delete_remark:'',
  show_free:false,
  show_together:false,
  show_together_list:false,
  together_list:[],
  together_loading:false,
  show_give_list:false,
  give_loading:false,
  give_list:[],
  show_tk: false,
  show_tk_list: false,
  filteredOrder: [],
  select_orders:[],
  select_tk_projects:[],
  total_price:0,
  timeRange: [new Date().setHours(0,0,0,0), new Date().setHours(23,59,59,999)],
  original_price:0,
  show_today: false,
  today_orders: [],
  today_loading: false,
});
function formatDate(timestamp) {
  const date = new Date(timestamp);
  // 添加时区偏移（单位：分钟）
  const offset = date.getTimezoneOffset() * 60000; // 转为毫秒
  const localTime = new Date(date.getTime() - offset);
  return localTime.toISOString().replace('T', ' ').substring(0, 19);
}


onMounted(() => {
  on_ref()
  api.getConfig().then((res) => {
    data.config = res.data
  })
})

function on_ref() {
  get_orders_notpay()
  get_order_pay()
  get_order_delete()
}

function ini_give_form() {
  data.giveForm = {
    type: 1,//0.划扣卡记录id1.储值2.积分3.优惠券4.赠送金
    projectstat_id: 0,
    old_user_id: null,
    new_user_id: null,
    project_id: 0,
    remark: "",
    fjq_ids: []
  }
  data.select_customer = {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0,
      free:0
    }
  }
  data.select_customer_new = {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0,
      free:0
    }
  }
}

function get_orders_notpay() {
  api.getOrders({
    pay_status: 1,
    name: data.keyword
  }).then((res) => {
    data.order_list = res.data.items
  })
}



function get_order_pay() {
  data.card_loading = true;
  // 修正时间范围处理（确保包含完整的一天）
  const params = {
    pay_status: 2,
    name: data.keyword,
    start_time: formatDate(data.timeRange[0]), // 开始日00:00:00
    end_time: formatDate(data.timeRange[1]) // 结束日23:59:59
  };

  api.getOrders(params).then((res) => {
    data.card_loading = false;
    data.orders = res.data.items;
  });
}
function get_order_delete() {
  data.card_loading = true
  api.getOrders({
    delete: 1,
    name: data.keyword
  }).then((res) => {
    data.card_loading = false
    data.orders_delete = res.data.items
  })
}

function on_detail(item) {
  api.detailOrder({
    id: item.id,
  }).then((res) => {
    data.show_detail = true
    data.show_data = item
    data.detail = res.data
  })
}

function detail_button() {
  data.show_delete = true
}

function detail_button1(price,user_id) {
    api.getCustomer({
      user_id:user_id,
    }).then((res) => {
       data.select_customer = res.data
    })
    go_pay(price)
}

function go_cancel() {
  api.on_cancel({
    id: data.detail.id,
    delete_remark:data.delete_remark
  }).then((res) => {
    data.show_delete = false
    data.show_detail = false
    message.success('作废成功')
    on_ref()
  })
}


function on_pay() {
  if (data.payForm.fkfs.length === 0) {
    message.error('请选择收款方式')
    return;
  }
  let images = data.payForm.images
  if (images) {
    let urls = images.map(item => item.url);
    data.payForm.images_pc = urls
  }


  api.on_pay(data.payForm).then((res) => {
    message.success('支付成功')
    data.pay = false
    data.show_detail = false
    on_ref()
  })
}

function go_pay(price) {
  // 重置所有收款相关字段，确保每次打开收款弹窗时都是干净的状态
  data.payForm.cdp = 0
  data.payForm.weimei = 0
  data.payForm.free = 0
  data.payForm.fkfs = []
  data.payForm.images = []
  
  api.on_batPay({
    id: data.detail.id,
    money: data.detail.pay_money
  }).then((res) => {
    data.pay = true
    data.pay_data = res.data
    data.payForm.id = res.data.water_id
    data.payForm.order_id = res.data.order_id
    data.payForm.money = res.data.money
    data.original_price = price
    // 直接向 fkfs 数组添加一个新对象，并设置 price
    data.payForm.fkfs.push({
      fkfs: '', // 支付方式，可以根据需要设置默认值，例如从 data.config.pay_way 中取一个
      price: parseFloat(price), // 使用传入的 price 参数
    });
  })
}

const onCreate_gg2 = () => {
  return {
    fkfs: '',
    price: 0, // 用户手动添加时，可以设置一个默认值，比如 0
  };
}

const handleFinish = ({file, event}) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}

function go_give() {
  ini_give_form()
  data.show_give = true
}

function go_tk() {
  data.show_tk = true
}

function search_customer(query) {
  data.search_loading = true
  api.getCustomers({keyword: query}).then((res) => {
    data.select_customers = res.data.items
    data.search_loading = false
  })
  tk_end()
}

function search_order(query) {
  data.search_loading = true
  if(!data.select_customer){
    message.info('未选择客户')
    return
  }
  api.getOrdersCard({keyword: query,user_id:data.select_customer.id}).then((res) => {
    data.select_orders = res.data
    data.search_loading = false
  })
}

function change_customer(value) {
  api.getCustomer({
    user_id: value,
  }).then((res) => {
    data.select_customer = res.data
    data.giveForm.old_user_id = res.data.user_id
    get_jf()
  })
  search_order()
  tk_end()
}

function change_order(value) {
  data.filteredOrder = data.select_orders.filter(item => item.id === value);
}

function get_jf() {
  api.get_jf({
    user_id: data.select_customer.user_id,
  }).then((res) => {
    data.get_jf_data = res.data
    data.fujia = res.data.fujia.unused
  })
}

function change_customer2(value) {
  api.getCustomer({
    user_id: value,
  }).then((res) => {
    data.select_customer_new = res.data
    data.giveForm.new_user_id = res.data.user_id
  })
}

function create_assets() {
  api.createAssets(data.giveForm).then((res) => {
    message.success('转账成功,请等待审核通过后收款方会显示到账')
    get_new_assets()
  })
}

function create_tk() {
  data.tkForm.select_tk_projects = data.select_tk_projects
  data.tkForm.total_price = data.total_price
  data.tkForm.user_id = data.select_customer.id
  data.tkForm.order_id = data.filteredOrder[0].id
  api.createOrderRefund(data.tkForm).then((res) => {
    message.success('退款成功,请等待审核通过后收款方会显示到账')
    data.show_tk = false
  })
}

function tk_end(){
  data.select_orders = []
  data.filteredOrder = []
  data.select_tk_projects = []
}

function get_new_assets() {
  change_customer(data.giveForm.old_user_id)
  change_customer2(data.giveForm.new_user_id)
  data.giveForm.fjq_ids = []
}

function mode_fkfs(item) {
  data.mode_fkfs = true
  data.fkfsForm = item
  data.fkfsForm.order_id = item.id
}

function save_fkfs() {
  api.on_fkfs(data.fkfsForm).then((res) => {
    message.success('编辑成功')
    data.mode_fkfs = false
    on_ref()
  })
}

function go_together(){
  ini_give_form()
  data.show_together=true
}

function go_today(){
  data.show_today = true
  data.today_loading = true
  // 获取今日消费列表
  const today = new Date()
  // const start_time = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
  // const end_time = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59)
  
  api.get_today_detail().then((res) => {
    data.today_orders = res.data || []
    data.today_loading = false
  })
}

function exportTodayOrders(){
  const orders = Array.isArray(data.today_orders) ? data.today_orders : []
  if(!orders.length){
    message.info('暂无可导出的记录')
    return
  }
  
  // 创建工作簿
  const wb = XLSX.utils.book_new()
  const ws_data = []
  
  // 表头
  const headers = [
    '订单号','商品名称','数量','折扣率','商品金额','应收','订单原价','订单总额','整单折扣','优惠合计','实际付款','整单优惠价','积分抵扣','储值抵扣','赠送金抵扣','卡券抵扣','下单客户','下单时间','录入人员','收款方式','收款金额','备注','凭证'
  ]
  ws_data.push(headers)
  
  orders.forEach((o) => {
    const goodsArr = o?.goods_arr || []
    const fkfsArr = o?.fkfs_arr || []
    const fkfsNames = (fkfsArr || []).map(f => f?.fkfs ?? '').join(' | ')
    const fkfsPrices = (fkfsArr || []).map(f => f?.price ?? 0).join(' | ')
    const waterImgs = (o?.water || [])
    const originalPrice = (o?.original_price ?? o?.price ?? 0)
    const orderTotal = (o?.price ?? 0)
    const zhekou = (o?.zhekou ?? '')
    const deductTotal = (o?.deduct_price ?? o?.other?.deduct_total ?? '')
    const payMoney = (o?.pay_money ?? '')
    const orderDeduct = (o?.other?.deduct ?? '')
    const cdpDk = (o?.cdp_dk ?? '')
    const weimeiDk = (o?.weimei_dk ?? '')
    const freeDk = (o?.free_dk ?? '')
    const fujia = (o?.other?.fujia ?? '')
    const userName = (o?.user_name ?? '')
    const createdAt = (o?.created_at ?? o?.day ?? '')
    const butler = (o?.butler ?? '')
    const remark = (o?.remark ?? '')
    
    // 如果订单有多个商品，每个商品一行
    if(goodsArr.length > 0) {
      goodsArr.forEach((g, index) => {
        ws_data.push([
          index === 0 ? o.id : '', // 只在第一行显示订单号
          g?.title ?? '',
          g?.num ?? 1,
          g?.zhekou ?? '',
          g?.money ?? g?.price ?? '',
          g?.price ?? '',
          originalPrice, // 每行都显示订单信息
          orderTotal,
          zhekou,
          deductTotal,
          payMoney,
          orderDeduct,
          cdpDk,
          weimeiDk,
          freeDk,
          fujia,
          userName,
          createdAt,
          butler,
          fkfsNames,
          fkfsPrices,
          remark,
          waterImgs.length > 0 ? waterImgs.join('\n') : '', // 图片URL换行分隔
        ])
      })
    } else {
      // 没有商品明细的订单
      ws_data.push([
        o.id,
        '',
        '',
        '',
        '',
        '',
        originalPrice,
        orderTotal,
        zhekou,
        deductTotal,
        payMoney,
        orderDeduct,
        cdpDk,
        weimeiDk,
        freeDk,
        fujia,
        userName,
        createdAt,
        butler,
        fkfsNames,
        fkfsPrices,
        remark,
        waterImgs.length > 0 ? waterImgs.join('\n') : '',
      ])
    }
  })
  
  // 创建工作表
  const ws = XLSX.utils.aoa_to_sheet(ws_data)
  
  // 设置列宽
  const colWidths = [
    { wch: 12 }, // 订单号
    { wch: 20 }, // 商品名称
    { wch: 8 },  // 数量
    { wch: 10 }, // 折扣率
    { wch: 12 }, // 商品金额
    { wch: 10 }, // 应收
    { wch: 12 }, // 订单原价
    { wch: 12 }, // 订单总额
    { wch: 10 }, // 整单折扣
    { wch: 12 }, // 优惠合计
    { wch: 12 }, // 实际付款
    { wch: 12 }, // 整单优惠价
    { wch: 10 }, // 积分抵扣
    { wch: 10 }, // 储值抵扣
    { wch: 12 }, // 赠送金抵扣
    { wch: 10 }, // 卡券抵扣
    { wch: 15 }, // 下单客户
    { wch: 20 }, // 下单时间
    { wch: 12 }, // 录入人员
    { wch: 15 }, // 收款方式
    { wch: 15 }, // 收款金额
    { wch: 20 }, // 备注
    { wch: 30 }, // 凭证
  ]
  ws['!cols'] = colWidths
  
  // 添加工作表到工作簿
  XLSX.utils.book_append_sheet(wb, ws, '今日消费列表')
  
  // 导出Excel文件
  XLSX.writeFile(wb, `今日消费列表_${new Date().toISOString().slice(0,10)}.xlsx`)
}

// 今日营收-展开明细控制
function toggleTodayExpanded(id){
  if(!Array.isArray(data.today_expanded_ids)){
    data.today_expanded_ids = []
  }
  const idx = data.today_expanded_ids.indexOf(id)
  if(idx >= 0){
    data.today_expanded_ids.splice(idx,1)
  }else{
    data.today_expanded_ids.push(id)
  }
}

function fmtPrice(v){
  const n = Number(v)
  if (Number.isNaN(n)) return v ?? ''
  return n.toFixed(2)
}

function go_free(){
  ini_give_form()
  data.show_free=true
}

function create_free(){
  data.freeForm.user_id = data.select_customer.user_id
  data.freeForm.type = 4
  data.freeForm.use_type = 1
  api.createFinanceAssets(data.freeForm).then((res) => {
    message.success('赠送成功')
    data.show_free = false
  })
}

function create_together(){
  data.togetherForm.before_user_id = data.select_customer.user_id
  data.togetherForm.before_user_name = data.select_customer.name
  data.togetherForm.before_user_card_no = data.select_customer.card_number
  data.togetherForm.before_user_phone = data.select_customer.mobile
  data.togetherForm.after_user_id = data.select_customer_new.user_id
  api.createUserTogether(data.togetherForm).then((res) => {
    message.success('合并成功')
    data.show_together = false
  })
}

function show_together(){
  data.show_together_list=true
  data.together_loading = true
  api.getUserTogether({
    keyword:data.keyword
  }).then((res) => {
     data.together_list = res.data
     data.together_loading = false
     data.keyword =""
  })
}

function list_give(){
  data.show_give_list = true
  data.give_loading = true
  api.getProjectGiveList({
    keyword:data.keyword,
    user_id:""
  }).then((res) => {
     data.give_list = res.data
     data.give_loading = false
     data.keyword =""
  })
}

function list_tk(){
  data.show_tk_list = true
  data.tk_loading = true
  api.getOrderRefund({
    keyword:data.keyword,
  }).then((res) => {
     data.tk_list = res.data
     data.tk_loading = false
     data.keyword =""
  })
}

function handleBucklingChange(value, index,i,b){
  data.select_tk_projects = []//选中的商品规则和数量
  data.filteredOrder[index]['goods_arr'][i]['project_hk_price'][b].select_nums = value;
  data.filteredOrder.map(item1 => {
    item1.goods_arr.map(item2 => {
      item2.project_hk_price.map(
          item => {
            if(item.select_nums>0){
              data.select_tk_projects.push(
                  {
                    "id":item.id,
                    "single_price":item.single_price,
                    "name":item.project_name,
                    "nums":item.select_nums,
                  }
              )
            }
          }
      )
    })
  })
  data.total_price = data.select_tk_projects.reduce((sum, item) => {
    return sum + (item.nums * parseFloat(item.single_price));
  }, 0);
}

function handleTimeChange() {
  if(data.timeRange && data.timeRange.length === 2) {
    get_order_pay();
  }
}

function handlePrice() {
  data.payForm.fkfs = []
  data.payForm.fkfs.push({
    fkfs: '',
    price: parseFloat(data.original_price-data.payForm.cdp-data.payForm.weimei-data.payForm.free),
  });
}


</script>

<template>

  <AppPage :show-footer="false">
    <div style="width: 100%;background: #fff;border-radius: 10px;margin-bottom: 10px;padding:5px 10px">
      <div style="display: flex;justify-content: space-between">
        <div style="display: flex">
          <NInput @change="search_customer" v-model:value="data.keyword" :loading="data.loading" clearable
                  type="text" placeholder="请输入客户姓名/病历号/手机号检索" style="margin-right: 5px;width: 300px"/>
          <n-button type="primary" @click="on_ref()">
            <TheIcon icon="material-symbols:manage-search" :size="18" class="mr-5"/>
            搜索
          </n-button>
        </div>
        <div style="display: flex">
<!--          <n-button type="primary" secondary style="margin-right: 5px;" @click="go_together()">-->
<!--            <TheIcon icon="material-symbols:reset-focus-rounded" :size="18" class="mr-5"/>-->
<!--            退款-->
<!--          </n-button>-->
<!--          <n-button secondary type="primary" style="margin-right: 5px;" @click="go_together()">-->
<!--            <TheIcon icon="material-symbols:quick-reference-rounded" :size="18" class="mr-5"/>-->
<!--            退款记录-->
<!--          </n-button>-->
          <n-button secondary type="primary" style="margin-right: 5px;" @click="go_today()">
            <TheIcon icon="tabler:moneybag-plus" :size="18" class="mr-5"/>
            今日营收
          </n-button>
          <n-button secondary type="primary" style="margin-right: 5px;" @click="go_free()">
            <TheIcon icon="material-symbols:money-bag-outline" :size="18" class="mr-5"/>
            赠送金
          </n-button>
          <n-button secondary type="primary" style="margin-right: 5px;" @click="go_together()">
            <TheIcon icon="material-symbols:manage-accounts-outline" :size="18" class="mr-5"/>
            合并
          </n-button>
          <n-button secondary type="primary" style="margin-right: 5px;" @click="show_together()">
            <TheIcon icon="material-symbols:list-alt-check-outline-sharp" :size="18" class="mr-5"/>
            合并记录
          </n-button>
          <n-button secondary type="primary" style="margin-right: 5px;" @click="go_give()">
            <TheIcon icon="material-symbols:chat-paste-go" :size="18" class="mr-5"/>
            转账
          </n-button>
          <n-button secondary type="primary" style="margin-right: 5px;" @click="list_give()">
            <TheIcon icon="material-symbols:list-alt" :size="18" class="mr-5"/>
            转账记录
          </n-button>
<!--          <n-button secondary type="primary" style="margin-right: 5px;" @click="go_tk()">-->
<!--            <TheIcon icon="material-symbols:chat-paste-go" :size="18" class="mr-5"/>-->
<!--            退款-->
<!--          </n-button>-->
<!--          <n-button secondary type="primary" style="margin-right: 5px;" @click="list_tk()">-->
<!--            <TheIcon icon="material-symbols:list-alt" :size="18" class="mr-5"/>-->
<!--            退款记录-->
<!--          </n-button>-->
          <n-button type="primary" @click="on_ref()" >
            <TheIcon icon="material-symbols:refresh-rounded" :size="18" class="mr-5"/>
            刷新
          </n-button>
        </div>
      </div>
    </div>
    <n-grid x-gap="12" :cols="1" style="height: 100%">
      <n-gi>
        <n-card style="height: 100%" size="small" :segmented="{content: true,footer: 'soft',}">
          <n-tabs type="segment" animated :on-update:value="on_ref">
            <n-tab-pane name="chap1" tab="挂单">
              <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
                <n-grid x-gap="12" y-gap="12" cols="4">
                  <n-gi v-for="item in data.order_list">
                    <n-card embedded size="small" :segmented="{content: true,footer: 'soft',}">
                      <template #header>
                        <n-h6 prefix="bar" type="success"
                              style="margin: 0;font-size: 14px;height: 30px;display: flex;align-items: center">
                          <NImage :src="item.user_avatar" style="width: 30px;height: 30px;border-radius: 50%;"/>&nbsp;
                          <div style="height: 100%;line-height: 15px;margin-left: 5px;">
                            {{ item.user_name }}<br>
                            <span style="font-size: 12px;color:#747586">购买于:{{ item.day }}</span>
                          </div>
                        </n-h6>
                      </template>
                      <template #header-extra>
                        <n-button type="info" dashed size="medium">单号:{{ item.id }}</n-button>
                      </template>
                      <n-scrollbar style="height: 80px">
                        <NFlex v-for="item2 in item.goods_arr">
                          <n-tag style="margin:3px">{{ item2.title + 'x' + item2.num }}</n-tag>
                        </NFlex>
                      </n-scrollbar>

                      <template #footer>
                        <NFlex justify="space-between">
                          <div style="color: #d95b74">￥{{ item.pay_money }}</div>
                          <div style="color: #d95b74">
                            <n-button size="small" :disabled="!item.is_check" @click="on_detail(item)" type="primary">
                              <TheIcon icon="material-symbols:playlist-add-check-rounded" :size="18" class="mr-5"/>
                              <div v-if="item.is_check">操作</div>
                              <div v-else>待审核</div>
                            </n-button>
                          </div>
                        </NFlex>
                      </template>
                    </n-card>
                  </n-gi>
                </n-grid>
              </n-spin>
            </n-tab-pane>
            <n-tab-pane name="chap2" tab="今日已支付">
              <div style="margin-bottom: 15px">
                <n-date-picker
                  v-model:value="data.timeRange"
                  type="daterange"
                  clearable
                  @update:value="handleTimeChange"
                />
              </div>
              <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
                <n-scrollbar v-if="data.orders.length>0" style="max-height: calc(100vh - 200px);padding:0 20px 0px 0px">
                  <n-collapse accordion class="cards" :trigger-areas="['main']">
                    <n-collapse-item :key="item.id" :name="item.id" v-for="item in data.orders" class="card">
                      <template #header>
                        <div style="display: flex; align-items: center;justify-content: flex-start">
                          <n-h6 prefix="bar" type="default" style="margin: 0;font-size: 16px">
                            <div style="display: flex">
                              <n-button type="info" dashed size="large">{{ item.user_name }}[{{ item.id }}]</n-button>
                              <div style="height:40px;line-height:20px;margin-left: 10px">
                                <span v-for="item2 in item.goods_arr" style="margin-right: 5px">
                                  {{ item2.title }}<span style="font-size: 12px">X{{ item2.num }}</span>
                                </span>
                                <br>
                                <span style="font-size: 12px;color:#747586">购买于:{{ item.day }}</span>
                              </div>
                            </div>
                          </n-h6>
                        </div>
                      </template>
                      <template #header-extra>
                        <n-button type="primary" dashed disabled>{{ item.status_format }}</n-button>
                      </template>

                      <div class="project_list">
                        <n-scrollbar x-scrollable>
                          <div style="display: flex;gap: 10px;padding-bottom: 20px">
                            <n-card size="small" style="width: 100%" :bordered="false"
                                    :segmented="{content: true,footer: 'soft',}">
                              <template #header>
                                <n-h6 prefix="bar" style="margin: 0;font-size: 14px">商品详情</n-h6>
                              </template>

                              <n-layout style="width: 1300px">
                                <n-layout-header>
                                  <n-flex>
                                    <n-tag size="large" style="width: 120px"> 已选商品</n-tag>
                                    <n-tag size="large" style="width: 300px"> 已选项目</n-tag>
                                    <n-tag size="large" style="width: 80px"> 单价</n-tag>
                                    <n-tag size="large" style="width: 50px"> 数量</n-tag>
                                    <n-tag size="large" style="width: 80px"> 折扣</n-tag>
                                    <n-tag size="large" style="width: 80px"> 应收</n-tag>
                                    <n-tag size="large" style="width: 80px"> 佣金基数</n-tag>
                                    <n-tag size="large" style="width: 130px"> 手术日期</n-tag>
                                    <n-tag size="large" style="width: 100px"> 结算科室</n-tag>
                                    <n-tag size="large" style="width: 100px"> 顾问</n-tag>

                                  </n-flex>
                                </n-layout-header>
                                <n-layout-content content-style="padding: 10px 0;">
                                  <n-dynamic-input v-model:value="item.goods_arr" :max="item.goods.length" disabled>
                                    <template #action="{ index, create, remove, move }">
                                      <n-space style="margin-left: 20px">

                                      </n-space>
                                    </template>
                                    <template #default="{ value , index}">
                                      <n-flex>
                                        <n-input placeholder="0" v-model:value="value.title" style="width: 120px"
                                                 disabled/>
                                        <n-select
                                            v-model:value="value.project_names"
                                            multiple
                                            disabled
                                            :max-tag-count="1"
                                            style="width: 300px"
                                            placeholder="无需选择"
                                        />

                                        <n-input placeholder="0" v-model:value="value.money" style="width: 80px"
                                                 disabled/>
                                        <n-input-number disabled placeholder="0" min="1" :show-button="false"
                                                        v-model:value="value.num" style="width: 50px"/>
                                        <n-input-number disabled placeholder="0" max="100" :show-button="false"
                                                        v-model:value="value.zhekou" style="width: 80px">
                                          <template #suffix>%</template>
                                        </n-input-number>
                                        <n-input placeholder="0" v-model:value="value.price" style="width: 80px"
                                                 disabled/>
                                        <n-input placeholder="0" v-model:value="value.base_price" style="width: 80px"
                                                 disabled/>
                                        <n-input style="width: 130px" disabled v-model:value="value.ss_date"
                                                 placeholder="未填写"/>
                                        <NSelect
                                            v-model:value="value.keshi"
                                            :options="data.config.categorys"
                                            placeholder="未填写"
                                            filterable
                                            label-field="name"
                                            value-field="id"
                                            style="width: 100px"
                                            disabled
                                        />
                                        <NSelect
                                            v-model:value="value.face_id"
                                            :options="data.meeting_users"
                                            placeholder="未填写"
                                            filterable
                                            label-field="name"
                                            value-field="id"
                                            style="width: 100px"
                                            disabled
                                        />

                                      </n-flex>
                                    </template>
                                  </n-dynamic-input>
                                </n-layout-content>
                              </n-layout>

                              <template #footer>
                                <div style="display: flex">
                                  <div class="order_more">
                                    <div class="text">订单总额:¥{{ item.price }}</div>
                                    <div class="text">实际付款:¥{{ item.pay_money }}</div>
                                  </div>
                                  <div class="order_more">
                                    <div class="text">整单优惠价:¥{{ item.other.deduct }}</div>
                                    <div class="text">积分抵扣:¥{{ item.cdp_dk }}</div>
                                  </div>
                                  <div class="order_more">
                                    <div class="text">储值抵扣:¥{{ item.weimei_dk }}</div>
                                    <div class="text">卡券抵扣:¥{{ item.other.fujia }}</div>
                                  </div>
                                  <div class="order_more">
                                    <div class="text">赠送金抵扣:¥{{ item.free_dk }}</div>
                                    <div class="text" v-for="item2 in item.fkfs_arr">{{ item2.fkfs }}:¥{{
                                        item2.price
                                      }}
                                    </div>
                                  </div>
                                  <div class="order_more">
                                    <div class="text">录入人:{{ item.butler }}</div>
                                    <div class="text">录入备注:{{ item.remark }}</div>
                                  </div>
                                </div>
                              </template>
                            </n-card>

                          </div>
                        </n-scrollbar>
                        <div style="margin-top: 10px">
                          <n-button type="info" style="margin-right:10px" v-if="item.is_cancel"
                                    @click="mode_fkfs(item)">
                            <TheIcon icon="material-symbols:contract-edit" :size="18" class="mr-5"/>
                            编辑收款方式
                          </n-button>
<!--                          <n-popconfirm @positive-click="go_cancel2(item)" v-if="item.is_cancel">-->
<!--                            <template #trigger>-->
<!--                              <n-button type="error" style="margin-right:10px">-->
<!--                                <TheIcon icon="material-symbols:contract-delete" :size="18" class="mr-5"/>-->
<!--                                作废-->
<!--                              </n-button>-->
<!--                            </template>-->
<!--                            确定要作废订单吗？-->
<!--                          </n-popconfirm>-->
                        </div>

                      </div>

                    </n-collapse-item>
                  </n-collapse>
                </n-scrollbar>
                <n-empty v-else description="暂无数据" style="margin: 50px"></n-empty>
              </n-spin>
            </n-tab-pane>
            <n-tab-pane name="chap3" tab="作废记录">
              <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
                <n-scrollbar v-if="data.orders_delete.length>0" style="max-height: calc(100vh - 200px);padding:0 20px 0px 0px">
                  <n-collapse accordion class="cards" :trigger-areas="['main']">
                    <n-collapse-item :key="item.id" :name="item.id" v-for="item in data.orders_delete" class="card">
                      <template #header>
                        <div style="display: flex; align-items: center;justify-content: flex-start">
                          <n-h6 prefix="bar" type="default" style="margin: 0;font-size: 16px">
                            <div style="display: flex">
                              <n-button type="info" dashed size="large">{{ item.user_name }}[{{ item.id }}]</n-button>
                              <div style="height:40px;line-height:20px;margin-left: 10px">
                                <span v-for="item2 in item.goods_arr" style="margin-right: 5px">
                                  {{ item2.title }}<span style="font-size: 12px">X{{ item2.num }}</span>
                                </span>
                                <br>
                                <span style="font-size: 12px;color:#747586">购买于:{{ item.day }}</span>
                              </div>
                            </div>
                          </n-h6>
                        </div>
                      </template>
                      <template #header-extra>
                        <n-button type="error"  >已作废</n-button>
                      </template>

                      <div class="project_list">
                        <n-scrollbar x-scrollable>
                          <div style="display: flex;gap: 10px;padding-bottom: 20px">
                            <n-card size="small" style="width: 100%" :bordered="false"
                                    :segmented="{content: true,footer: 'soft',}">
                              <template #header>
                                <n-h6 prefix="bar" style="margin: 0;font-size: 14px">商品详情</n-h6>
                              </template>

                              <n-layout style="width: 1300px">
                                <n-layout-header>
                                  <n-flex>
                                    <n-tag size="large" style="width: 120px"> 已选商品</n-tag>
                                    <n-tag size="large" style="width: 300px"> 已选项目</n-tag>
                                    <n-tag size="large" style="width: 80px"> 单价</n-tag>
                                    <n-tag size="large" style="width: 50px"> 数量</n-tag>
                                    <n-tag size="large" style="width: 80px"> 折扣</n-tag>
                                    <n-tag size="large" style="width: 80px"> 应收</n-tag>
                                    <n-tag size="large" style="width: 80px"> 佣金基数</n-tag>
                                    <n-tag size="large" style="width: 130px"> 手术日期</n-tag>
                                    <n-tag size="large" style="width: 100px"> 结算科室</n-tag>
                                    <n-tag size="large" style="width: 100px"> 顾问</n-tag>

                                  </n-flex>
                                </n-layout-header>
                                <n-layout-content content-style="padding: 10px 0;">
                                  <n-dynamic-input v-model:value="item.goods_arr" :max="item.goods.length" disabled>
                                    <template #action="{ index, create, remove, move }">
                                      <n-space style="margin-left: 20px">

                                      </n-space>
                                    </template>
                                    <template #default="{ value , index}">
                                      <n-flex>
                                        <n-input placeholder="0" v-model:value="value.title" style="width: 120px"
                                                 disabled/>
                                        <n-select
                                            v-model:value="value.project_names"
                                            multiple
                                            disabled
                                            :max-tag-count="1"
                                            style="width: 300px"
                                            placeholder="无需选择"
                                        />

                                        <n-input placeholder="0" v-model:value="value.money" style="width: 80px"
                                                 disabled/>
                                        <n-input-number disabled placeholder="0" min="1" :show-button="false"
                                                        v-model:value="value.num" style="width: 50px"/>
                                        <n-input-number disabled placeholder="0" max="100" :show-button="false"
                                                        v-model:value="value.zhekou" style="width: 80px">
                                          <template #suffix>%</template>
                                        </n-input-number>
                                        <n-input placeholder="0" v-model:value="value.price" style="width: 80px"
                                                 disabled/>
                                        <n-input placeholder="0" v-model:value="value.base_price" style="width: 80px"
                                                 disabled/>
                                        <n-input style="width: 130px" disabled v-model:value="value.ss_date"
                                                 placeholder="未填写"/>
                                        <NSelect
                                            v-model:value="value.keshi"
                                            :options="data.config.categorys"
                                            placeholder="未填写"
                                            filterable
                                            label-field="name"
                                            value-field="id"
                                            style="width: 100px"
                                            disabled
                                        />
                                        <NSelect
                                            v-model:value="value.face_id"
                                            :options="data.meeting_users"
                                            placeholder="未填写"
                                            filterable
                                            label-field="name"
                                            value-field="id"
                                            style="width: 100px"
                                            disabled
                                        />

                                      </n-flex>
                                    </template>
                                  </n-dynamic-input>
                                </n-layout-content>
                              </n-layout>

                              <template #footer>
                                <div style="display: flex">
                                  <div class="order_more">
                                    <div class="text">订单总额:¥{{ item.price }}</div>
                                    <div class="text">实际付款:¥{{ item.pay_money }}</div>
                                  </div>

<!--                                  <div class="order_more">-->
<!--                                    <div class="text" v-for="item2 in item.fkfs_arr">{{ item2.fkfs }}:¥{{-->
<!--                                        item2.price-->
<!--                                      }}-->
<!--                                    </div>-->
<!--                                  </div>-->
                                  <div class="order_more">
                                    <div class="text">录入人:{{ item.butler }}</div>
                                    <div class="text">录入备注:{{ item.remark }}</div>
                                  </div>

                                  <div class="order_more">
                                    <div class="text">作废原因:</div>
                                    <div class="text">{{ item.delete_remark }}</div>
                                  </div>
                                </div>
                              </template>
                            </n-card>

                          </div>
                        </n-scrollbar>

                      </div>

                    </n-collapse-item>
                  </n-collapse>
                </n-scrollbar>
                <n-empty v-else description="暂无数据" style="margin: 50px"></n-empty>
              </n-spin>
            </n-tab-pane>
          </n-tabs>
        </n-card>
      </n-gi>
    </n-grid>



    <n-drawer v-model:show="data.show_detail" width="760px">
      <n-drawer-content :title="'订单编号'+data.detail.id" closable>
        <n-divider dashed>包含商品</n-divider>
        <n-descriptions style="width: 100%;" label-placement="left" bordered :column="1">
          <n-descriptions-item label="商品名称">数量&nbsp;/&nbsp;折扣率</n-descriptions-item>
          <n-descriptions-item :label="item2.title" v-for="item2 in data.detail.goods_arr">{{ item2.num }}&nbsp;&nbsp;/&nbsp;&nbsp;{{
              item2.zhekou
            }}%
          </n-descriptions-item>
        </n-descriptions>
        <n-divider dashed>支付详情</n-divider>
        <n-descriptions style="width: 100%;" label-placement="left" bordered :column="3">
          <n-descriptions-item label="订单原价">{{ data.detail.original_price??data.detail.price }}</n-descriptions-item>
          <n-descriptions-item label="订单总额">{{ data.detail.price }}</n-descriptions-item>
          <n-descriptions-item label="整单折扣">{{ data.detail.zhekou??'100' }}%</n-descriptions-item>
          <n-descriptions-item label="优惠合计">{{ data.detail.deduct_price }}</n-descriptions-item>
          <n-descriptions-item label="实际付款">{{ data.detail.pay_money }}</n-descriptions-item>
          <n-descriptions-item label="整单优惠价">{{ data.detail.other.deduct }}</n-descriptions-item>
          <n-descriptions-item label="积分抵扣">{{ data.detail.cdp_dk }}</n-descriptions-item>
          <n-descriptions-item label="储值抵扣">{{ data.detail.weimei_dk }}</n-descriptions-item>
          <n-descriptions-item label="赠送金抵扣">{{ data.detail.free_dk }}</n-descriptions-item>
          <n-descriptions-item label="卡券抵扣">{{ data.detail.other.fujia }}</n-descriptions-item>
        </n-descriptions>
        <n-divider dashed>其他信息</n-divider>
        <n-descriptions style="width: 100%;" label-placement="left" bordered :column="2">
          <n-descriptions-item label="下单客户">
            {{ data.detail.user_name }}
          </n-descriptions-item>
          <n-descriptions-item label="下单时间">{{ data.detail.created_at }}</n-descriptions-item>
          <n-descriptions-item label="订单状态">{{ data.detail.status_format }}</n-descriptions-item>

          <n-descriptions-item label="录入人员">{{ data.detail.butler }}</n-descriptions-item>
        </n-descriptions>
        <n-divider dashed>收款信息</n-divider>
        <n-descriptions style="width: 100%;" label-placement="left" bordered :column="1">
          <n-descriptions-item label="收款账户">收款金额</n-descriptions-item>
          <n-descriptions-item :label="item2.fkfs" v-for="item2 in data.detail.fkfs_arr">{{ item2.price }}
          </n-descriptions-item>
        </n-descriptions>
        <n-divider dashed>支付凭证</n-divider>
        <n-descriptions style="width: 100%;" label-placement="left" bordered :column="1">
          <n-descriptions-item label="备注">{{ data.detail.remark }}</n-descriptions-item>
          <n-descriptions-item label="凭证">
            <n-scrollbar x-scrollable>
              <div style="display: flex">
                <n-image style="height:100px;border-radius: 5px;margin-right: 2px" :src="img"
                         v-for="img in data.detail.water"/>
              </div>
            </n-scrollbar>
          </n-descriptions-item>
        </n-descriptions>
        <template #footer>
          <div style="width: 100%;display: flex;">
            <n-button type="primary" size="large" @click="detail_button1(data.detail.pay_money,data.detail.user_id)">
              <TheIcon icon="material-symbols:money-bag-outline-rounded" :size="18" class="mr-5"/>
              收款
            </n-button>

            <n-button type="error" size="large" style="margin-left:10px" @click="detail_button()">
                  <TheIcon icon="material-symbols:contract-delete" :size="18" class="mr-5"/>
                  作废
            </n-button>
          </div>
        </template>

      </n-drawer-content>
    </n-drawer>
    <CrudModal
        v-model:visible="data.pay"
        title="收银台"
        @save="on_pay"
        style="width: 800px"
    >
      <NForm
          label-placement="left"
          label-align="left"
          :label-width="80"
          :model="data.payForm"
      >

        <NFormItem label="支付方式" path="fkfs">
          <n-layout>
            <n-layout-header>
              <n-flex>
                <n-tag size="large" style="width:350px"> 选择收款方式</n-tag>
                <n-tag size="large" style="width: 100px"> 收款金额</n-tag>
              </n-flex>
            </n-layout-header>
            <n-layout-content content-style="padding: 10px 0;" style="width: 593px">
              <n-dynamic-input v-model:value="data.payForm.fkfs" :on-create="onCreate_gg2">
                <template #default="{ value }">
                  <n-flex justify="space-between">
                    <NSelect
                        v-model:value="value.fkfs"
                        :options="data.config.pay_way"
                        placeholder="选择收款方式"
                        filterable
                        label-field="name"
                        value-field="name"
                        style="width: 350px"
                    />
                    <n-input-number v-model:value="value.price" style="width: 100px"/>
                  </n-flex>
                </template>
              </n-dynamic-input>
            </n-layout-content>
          </n-layout>
        </NFormItem>

        <NFormItem label="积分抵扣" path="cdp" style="width: 100%">
          <n-input-number v-model:value="data.payForm.cdp" style="width: 100px" @update:value="handlePrice"/>
          <span style="color: cornflowerblue;font-size: 12px;margin-left: 20px">积分余额：{{data.select_customer.totals?.cdp || 0}}</span>
        </NFormItem>
        <NFormItem label="储值抵扣" path="weimei" style="width: 100%">
          <n-input-number v-model:value="data.payForm.weimei" style="width: 100px" @update:value="handlePrice"/>
          <span style="color: cornflowerblue;font-size: 12px;margin-left: 20px">储值余额：{{data.select_customer.totals?.weimei || 0}}</span>
        </NFormItem>
        <NFormItem label="赠送金抵扣" path="free" style="width: 100%">
          <n-input-number v-model:value="data.payForm.free" style="width: 100px" @update:value="handlePrice"/>
          <span style="color: cornflowerblue;font-size: 12px;margin-left: 20px">赠送金余额：{{data.select_customer.totals?.free || 0}}</span>
        </NFormItem>

        <NFormItem label="支付凭证" path="images" style="width: 100%">
          <NUpload :action="data.uploadAction" :headers="{ authorization: data.token }" multiple list-type="image-card"
                   @finish="handleFinish" v-model:file-list="data.payForm.images">
          </NUpload>
        </NFormItem>
      </NForm>


    </CrudModal>
    <n-drawer v-model:show="data.show_give" width="650px">
      <n-drawer-content title="转账" closable>
        <div style="background: #f2f2f2;border-radius: 5px">
          <div class="main_header2">
            <div style="display: flex">
              <NAvatar :src="data.select_customer.avatar" class="avatar"/>
              <div class="info" style="margin-right: 10px">
                <span class="name">{{ data.select_customer.name }}{{ data.select_customer.mobile }}</span><br>
                <span class="no">No.{{ data.select_customer.card_number }}</span>
              </div>
            </div>
            <n-popover trigger="click">
              <template #trigger>
                <n-button type="info">
                  <TheIcon icon="material-symbols:search" :size="18" class="mr-5"/>
                  选择支付方
                </n-button>
              </template>
              <NSelect
                  :options="data.select_customers"
                  placeholder="输入姓名/病历号/手机号搜索"
                  filterable
                  label-field="all_name"
                  value-field="user_id"
                  style="width: 300px"
                  :loading="data.search_loading"
                  remote
                  clearable
                  @update:value="change_customer"
                  @search="search_customer"/>
            </n-popover>
          </div>
          <div class="info3">
            <div class="data_card">
              <div class="icon">
                <component :is="renderIcon('mdi-account-cash-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ (data.select_customer.totals?.weimei || 0).toFixed(2) }}<br>
                <span class="tag">储值余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('material-symbols:copyright-rounded', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.cdp || 0 }}<br>
                <span class="tag">积分余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-ticket-percent-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.fujia || 0 }}<br>
                <span class="tag">优惠券余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-table-split-cell', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.free || 0 }}<br>
                <span class="tag">赠送金余额</span>
              </div>
            </div>

          </div>
        </div>

        <div style="margin-top: 20px">
          <NForm
              label-placement="left"
              label-align="left"
              :label-width="80"
              :model="data.giveForm"
          >

            <NFormItem label="转账类型" path="type">
              <n-radio-group v-model:value="data.giveForm.type" name="radiogroup">
                <n-space>
                  <n-radio :value="1">储值金</n-radio>
                  <n-radio :value="2">积分</n-radio>
                  <n-radio :value="3">优惠券</n-radio>
                  <n-radio :value="4">赠送金</n-radio>
                </n-space>
              </n-radio-group>
            </NFormItem>

            <NFormItem label="转账金额" path="nums" v-if="data.giveForm.type!==3">
              <NInputNumber
                  v-model:value="data.giveForm.nums"
                  clearable
                  placeholder="请输入转账金额"
                  style="width: 100%"
              />
            </NFormItem>
            <NFormItem label="选择赠券" path="fjq_ids" v-if="data.giveForm.type===3">
              <NSelect
                  v-model:value="data.giveForm.fjq_ids"
                  :options="data.fujia"
                  placeholder="请选择券"
                  filterable
                  label-field="name"
                  value-field="id"
                  multiple
                  style="width: 100%"
              />
            </NFormItem>

            <NFormItem label="转账备注" path="remark">
              <NInput
                  type="textarea"
                  v-model:value="data.giveForm.remark"
                  clearable
                  placeholder="请输入转账备注"
              />
            </NFormItem>
          </NForm>
        </div>

        <div style="background: #f2f2f2;border-radius: 5px">
          <div class="main_header2">
            <div style="display: flex">
              <NAvatar :src="data.select_customer_new.avatar" class="avatar"/>
              <div class="info" style="margin-right: 10px">
                <span class="name">{{ data.select_customer_new.name }}{{ data.select_customer_new.mobile }}</span><br>
                <span class="no">No.{{ data.select_customer_new.card_number }}</span>
              </div>
            </div>
            <n-popover trigger="click">
              <template #trigger>
                <n-button type="info">
                  <TheIcon icon="material-symbols:search" :size="18" class="mr-5"/>
                  选择收款方
                </n-button>
              </template>
              <NSelect
                  :options="data.select_customers"
                  placeholder="输入姓名/病历号/手机号搜索"
                  filterable
                  label-field="all_name"
                  value-field="user_id"
                  style="width: 300px"
                  :loading="data.search_loading"
                  remote
                  clearable
                  @update:value="change_customer2"
                  @search="search_customer"/>
            </n-popover>
          </div>
          <div class="info3">
            <div class="data_card">
              <div class="icon">
                <component :is="renderIcon('mdi-account-cash-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ (data.select_customer_new.totals?.weimei || 0).toFixed(2) }}<br>
                <span class="tag">储值余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('material-symbols:copyright-rounded', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer_new.totals?.cdp || 0 }}<br>
                <span class="tag">积分余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-ticket-percent-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer_new.totals?.fujia || 0 }}<br>
                <span class="tag">优惠券余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-table-split-cell', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer_new.totals?.free || 0 }}<br>
                <span class="tag">赠送金余额</span>
              </div>
            </div>

          </div>
        </div>


        <template #footer>
          <div style="width: 100%;display: flex;">
            <n-popconfirm @positive-click="create_assets()">
              <template #trigger>
                <n-button type="primary" size="large">
                  <TheIcon icon="material-symbols:add" :size="18" class="mr-5"/>
                  确认转账
                </n-button>
              </template>
              确定要转账吗？
            </n-popconfirm>
          </div>
        </template>

      </n-drawer-content>
    </n-drawer>
    <n-modal v-model:show="data.mode_fkfs" preset="dialog" title="Dialog" style="width: 650px;">
      <template #header>
        <div>收款方式编辑</div>
      </template>
      <NForm
          label-placement="left"
          label-align="left"
          :label-width="80"
          :model="data.fkfsForm"
          style="margin-top: 20px"
      >
        <NFormItem label="" path="fkfs">
          <n-layout>
            <n-layout-header>
              <n-flex>
                <n-tag size="large" style="width:350px"> 选择收款方式</n-tag>
                <n-tag size="large" style="width: 100px"> 收款金额</n-tag>
              </n-flex>
            </n-layout-header>
            <n-layout-content content-style="padding: 10px 0;" style="width: 593px">
              <n-dynamic-input v-model:value="data.fkfsForm.fkfs" :on-create="onCreate_gg2">
                <template #default="{ value }">
                  <n-flex justify="space-between">
                    <NSelect
                        v-model:value="value.fkfs"
                        :options="data.config.pay_way"
                        placeholder="选择收款方式"
                        filterable
                        label-field="name"
                        value-field="name"
                        style="width: 350px"
                    />
                    <n-input-number v-model:value="value.price" style="width: 100px"/>
                  </n-flex>
                </template>
              </n-dynamic-input>
            </n-layout-content>
          </n-layout>
        </NFormItem>

      </NForm>

      <template #action>
        <n-button type="primary" size="large" @click="save_fkfs">
          <TheIcon icon="material-symbols:add" :size="18" class="mr-5"/>
          保存
        </n-button>
      </template>


    </n-modal>
    <n-modal v-model:show="data.show_delete" preset="dialog" title="Dialog" style="width: 650px;">
      <template #header>
        <div>订单作废</div>
      </template>
      <NForm
          label-placement="left"
          label-align="left"
          :label-width="80"
          style="margin-top: 20px"
      >
        <NFormItem label="作废原因" path="delete_remark">
           <NInput
                  type="textarea"
                  v-model:value="data.delete_remark"
                  clearable
                  placeholder="请输入作废原因"
              />
        </NFormItem>

      </NForm>

      <template #action>
        <n-button type="primary" size="large" @click="go_cancel">
          <TheIcon icon="material-symbols:add" :size="18" class="mr-5"/>
          提交
        </n-button>
      </template>


    </n-modal>
    <n-drawer v-model:show="data.show_free" width="640px">
      <n-drawer-content title="添加赠送金" closable>
        <div style="background: #f2f2f2;border-radius: 5px">
          <div class="main_header2">
            <div style="display: flex">
              <NAvatar :src="data.select_customer.avatar" class="avatar"/>
              <div class="info" style="margin-right: 10px">
                <span class="name">{{ data.select_customer.name }}{{ data.select_customer.mobile }}</span><br>
                <span class="no">No.{{ data.select_customer.card_number }}</span>
              </div>
            </div>
            <n-popover trigger="click">
              <template #trigger>
                <n-button type="info" >
                  <TheIcon icon="material-symbols:search" :size="18" class="mr-5"/>
                  选择客户
                </n-button>
              </template>
              <NSelect
                  :options="data.select_customers"
                  placeholder="输入姓名/病历号/手机号搜索"
                  filterable
                  label-field="all_name"
                  value-field="user_id"
                  style="width: 300px"
                  :loading="data.search_loading"
                  remote
                  clearable
                  @update:value="change_customer"
                  @search="search_customer"/>
            </n-popover>
          </div>
          <div class="info3">
            <div class="data_card">
              <div class="icon">
                <component :is="renderIcon('mdi-account-cash-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ (data.select_customer.totals?.weimei || 0).toFixed(2) }}<br>
                <span class="tag">储值余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('material-symbols:copyright-rounded', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.cdp || 0 }}<br>
                <span class="tag">积分余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-ticket-percent-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.fujia || 0 }}<br>
                <span class="tag">优惠券余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-table-split-cell', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.free || 0 }}<br>
                <span class="tag">赠送金余额</span>
              </div>
            </div>

          </div>
        </div>
        <div style="margin-top: 20px">
          <NForm
              label-placement="left"
              label-align="left"
              :label-width="80"
              :model="data.giveForm"
          >

            <NFormItem label="赠送金额" path="nums">
              <NInputNumber
                  v-model:value="data.freeForm.nums"
                  clearable
                  placeholder="请输入赠送金额"
                  style="width: 100%"
              />
            </NFormItem>

            <NFormItem label="备注" path="remark">
              <NInput
                  type="textarea"
                  v-model:value="data.freeForm.remark"
                  clearable
                  placeholder="请输入备注"
              />
            </NFormItem>
          </NForm>
        </div>
        <template #footer>
          <div style="width: 100%;display: flex;">
            <n-popconfirm @positive-click="create_free()">
              <template #trigger>
                <n-button type="primary" size="large">
                  <TheIcon icon="material-symbols:add" :size="18" class="mr-5"/>
                  确认赠送
                </n-button>
              </template>
              确定要赠送吗？
            </n-popconfirm>
          </div>
        </template>

      </n-drawer-content>
    </n-drawer>
    <n-drawer v-model:show="data.show_together" width="650px">
      <n-drawer-content title="合并" closable>
        <div style="background: #f2f2f2;border-radius: 5px">
          <div class="main_header2">
            <div style="display: flex">
              <NAvatar :src="data.select_customer.avatar" class="avatar"/>
              <div class="info" style="margin-right: 10px">
                <span class="name">{{ data.select_customer.name }}{{ data.select_customer.mobile }}</span><br>
                <span class="no">No.{{ data.select_customer.card_number }}</span>
              </div>
            </div>
            <n-popover trigger="click">
              <template #trigger>
                <n-button type="info" >
                  <TheIcon icon="material-symbols:search" :size="18" class="mr-5"/>
                  选择被合并人
                </n-button>
              </template>
              <NSelect
                  :options="data.select_customers"
                  placeholder="输入姓名/病历号/手机号搜索"
                  filterable
                  label-field="all_name"
                  value-field="user_id"
                  style="width: 300px"
                  :loading="data.search_loading"
                  remote
                  clearable
                  @update:value="change_customer"
                  @search="search_customer"/>
            </n-popover>
          </div>
          <div class="info3">
            <div class="data_card">
              <div class="icon">
                <component :is="renderIcon('mdi-account-cash-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ (data.select_customer.totals?.weimei || 0).toFixed(2) }}<br>
                <span class="tag">储值余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('material-symbols:copyright-rounded', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.cdp || 0 }}<br>
                <span class="tag">积分余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-ticket-percent-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.fujia || 0 }}<br>
                <span class="tag">优惠券余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-table-split-cell', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.free || 0 }}<br>
                <span class="tag">赠送金余额</span>
              </div>
            </div>

          </div>
        </div>

        <div style="margin-top: 20px;text-align: center">
             <TheIcon icon="material-symbols:keyboard-double-arrow-down-rounded" :size="88" color="#755791"/>
        </div>

        <div style="background: #f2f2f2;border-radius: 5px">
          <div class="main_header2">
            <div style="display: flex">
              <NAvatar :src="data.select_customer_new.avatar" class="avatar"/>
              <div class="info" style="margin-right: 10px">
                <span class="name">{{ data.select_customer_new.name }}{{ data.select_customer_new.mobile }}</span><br>
                <span class="no">No.{{ data.select_customer_new.card_number }}</span>
              </div>
            </div>
            <n-popover trigger="click">
              <template #trigger>
                <n-button type="info">
                  <TheIcon icon="material-symbols:search" :size="18" class="mr-5"/>
                  选择合并后
                </n-button>
              </template>
              <NSelect
                  :options="data.select_customers"
                  placeholder="输入姓名/病历号/手机号搜索"
                  filterable
                  label-field="all_name"
                  value-field="user_id"
                  style="width: 300px"
                  :loading="data.search_loading"
                  remote
                  clearable
                  @update:value="change_customer2"
                  @search="search_customer"/>
            </n-popover>
          </div>
          <div class="info3">
            <div class="data_card">
              <div class="icon">
                <component :is="renderIcon('mdi-account-cash-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ (data.select_customer_new.totals?.weimei || 0).toFixed(2) }}<br>
                <span class="tag">储值余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('material-symbols:copyright-rounded', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer_new.totals?.cdp || 0 }}<br>
                <span class="tag">积分余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-ticket-percent-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer_new.totals?.fujia || 0 }}<br>
                <span class="tag">优惠券余额</span>
              </div>
            </div>
            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-table-split-cell', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer_new.totals?.free || 0 }}<br>
                <span class="tag">赠送金余额</span>
              </div>
            </div>

          </div>
        </div>
        <n-alert title="注意" type="info" style="margin-top: 40px">
          1.已经开单的客户无法被合并<br>
          2.被合并客户数据将消失,只留下合并后的客户数据
        </n-alert>


        <template #footer>
          <div style="width: 100%;display: flex;">
            <n-popconfirm @positive-click="create_together()">
              <template #trigger>
                <n-button type="primary" size="large">
                  <TheIcon icon="material-symbols:add" :size="18" class="mr-5"/>
                  确认合并
                </n-button>
              </template>
              确定要合并吗？
            </n-popconfirm>
          </div>
        </template>

      </n-drawer-content>
    </n-drawer>
    <n-drawer v-model:show="data.show_together_list" width="600px">
      <n-drawer-content title="合并记录" closable>
        <NInput size="large" @change="show_together" v-model:value="data.keyword"  :loading="data.give_loading" clearable type="text" placeholder="请输入相关人姓名/病历号/手机号" style="margin-bottom: 20px"/>

        <n-spin :show="data.together_loading" style="--n-opacity-spinning:0.1;height: 500px">
        <n-card style="margin-bottom: 20px" v-for="item in data.together_list" size="small" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <div style="display: flex; align-items: center;justify-content: flex-start">
              <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                <div style="display: flex">
                <n-button type="info" dashed size="large">{{item.created_at}}</n-button>
                </div>
              </n-h6>
            </div>
          </template>

          <template #header-extra>
            <n-button type="primary" dashed disabled >操作人:{{item.created_name}}</n-button>
          </template>

          <div style="display: flex;font-size: 16px;color: #aaa;align-items: center;justify-content: space-between">
            <n-button type="error"   disabled >被合并人:{{item.before_user_name}}</n-button>
            <n-button type="primary"  disabled >受合并人:{{item.new_user_name}}</n-button>
          </div>

        </n-card>
        </n-spin>
      </n-drawer-content>
  </n-drawer>
    <n-drawer v-model:show="data.show_give_list" width="600px">
      <n-drawer-content title="转账记录" closable>
        <NInput size="large" @change="list_give" v-model:value="data.keyword"  :loading="data.give_loading" clearable type="text" placeholder="请输入相关人姓名/病历号/手机号" style="margin-bottom: 20px"/>
        <n-spin :show="data.give_loading" style="--n-opacity-spinning:0.1;height: 100%">
        <n-card style="margin-bottom: 20px" v-for="item in data.give_list" size="small" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <div style="display: flex; align-items: center;justify-content: flex-start">
              <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                <div style="display: flex">
                <n-button type="info" dashed size="large">转赠单号:{{item.id}}</n-button>
              <div style="height:40px;line-height:20px;margin-left: 10px">
                <span style="margin-right: 5px">
                  {{item.project_name}}<span style="font-size: 12px">X{{item.nums}}</span>
                </span>
                <br>
                <span style="font-size: 12px;color:#747586">赠送于:{{item.created_at}}</span>
              </div>
                </div>
              </n-h6>
            </div>
          </template>

          <template #header-extra>
            <n-button type="primary" dashed disabled v-if="item.states_name==='已审核'">{{item.states_name}}</n-button>
            <n-button type="info" v-else>{{item.states_name}}</n-button>
          </template>

          <div style="display: flex;font-size: 16px;color: #aaa;align-items: center">
            <n-button type="error"   disabled >发起人:{{item.old_user_name}}</n-button>&nbsp;->&nbsp;
            <n-button type="primary"  disabled >受赠人:{{item.new_user_name}}</n-button>
          </div>

        </n-card>
        </n-spin>
      </n-drawer-content>
  </n-drawer>
    <n-drawer v-model:show="data.show_tk" width="800px">
      <n-drawer-content title="退款" closable>
        <div style="background: #f2f2f2;border-radius: 5px">
          <div class="main_header2">
            <div style="display: flex">
              <NAvatar :src="data.select_customer.avatar" class="avatar"/>
              <div class="info" style="margin-right: 10px">
                <span class="name">{{ data.select_customer.name }}{{ data.select_customer.mobile }}</span><br>
                <span class="no">No.{{ data.select_customer.card_number }}</span>
              </div>
            </div>
            <n-popover trigger="click">
              <template #trigger>
                <n-button type="info">
                  <TheIcon icon="material-symbols:search" :size="18" class="mr-5"/>
                  选择退款方
                </n-button>
              </template>
              <NSelect
                  :options="data.select_customers"
                  placeholder="输入姓名/病历号/手机号搜索"
                  filterable
                  label-field="all_name"
                  value-field="user_id"
                  style="width: 300px"
                  :loading="data.search_loading"
                  remote
                  clearable
                  @update:value="change_customer"
                  @search="search_customer"/>
            </n-popover>
          </div>
          <div class="info3">
            <div class="data_card">
              <div class="icon">
                <component :is="renderIcon('mdi-account-cash-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ (data.select_customer.totals?.weimei || 0).toFixed(2) }}<br>
                <span class="tag">储值余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('material-symbols:copyright-rounded', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.cdp || 0 }}<br>
                <span class="tag">积分余额</span>
              </div>
            </div>

            <div class="data_card" style="margin-left: 10px;">
              <div class="icon">
                <component :is="renderIcon('mdi-ticket-percent-outline', { size: 30,color:'#fff' })"/>
              </div>
              <div class="con">
                {{ data.select_customer.totals?.fujia || 0 }}<br>
                <span class="tag">优惠券余额</span>
              </div>
            </div>


          </div>
        </div>

        <div style="margin-top: 20px">
          <NForm
              label-placement="left"
              label-align="left"
              :label-width="80"
              :model="data.tkForm"
          >
            <NFormItem label="退款商品" path="type">
              <NSelect
                  :options="data.select_orders"
                  placeholder="输入商品名/项目名/单号搜索"
                  filterable
                  label-field="title"
                  value-field="id"
                  style="width: 600px"
                  :loading="data.search_loading"
                  remote
                  clearable
                  @update:value="change_order"
                  @search="search_order"/>
            </NFormItem>
            <NFormItem label="商品详情" path="type">
              <n-card embedded v-for="(item,index) in data.filteredOrder" class="customer_card"   size="small" :segmented="{
                      content: true,
                      footer: 'soft',
                    }">

                <template #header>
                  <div style="display: flex; align-items: center;">
                    <div style="height:40px;line-height:20px">{{ item.good_title }}<br><span style="font-size: 12px;color:#747586">购买时间: {{ item.created_at }}</span></div>
                  </div>
                </template>
                <!--              项目划扣选择-->
                <n-collapse justify="space-between" size="large" >
                  <n-collapse-item :title="group['title']" v-for="(group,i) in item['goods_arr']">
                    <div v-for="(buck,b) in group['project_hk_price']"  style="margin-bottom: 8px;display: flex;">
                      <div style="flex: 2;">
                        <div>{{buck['name']}}</div>
                        <div style="line-height: 40px;">单次金额:{{buck['single_price']}}</div>
                      </div>
                      <div style="flex: 1; display: flex; flex-direction: column;">
                        <div style="margin-left: 140px">
                          剩余 <span>{{group['project_num'][b]}}</span> 次
                        </div>
                        <div>
                          <n-input-number size="small" placeholder="退款次数" min="0" :max="group['project_num'][b]" style="width: 120px;margin-top: 10px;float: right"  v-model:value=buck.select_nums @update:value="(value) => handleBucklingChange(value,index,i,b)" />
                        </div>
                      </div>
                    </div>
                  </n-collapse-item>
                </n-collapse>
              </n-card>
            </NFormItem>
            <NFormItem label="已选退款" path="total_price">
              <n-input round placeholder="0" style="width: 120px" :value="data.total_price">
                <template #suffix>
                  元
                </template>
              </n-input>
            </NFormItem>
            <NFormItem label="退款类型" path="type">
              <n-radio-group v-model:value="data.tkForm.type" name="radiogroup">
                <n-space>
                  <n-radio :value="1">储值金</n-radio>
                  <n-radio :value="2">现金</n-radio>
                </n-space>
              </n-radio-group>
            </NFormItem>

            <NFormItem label="退款备注" path="remark">
              <NInput
                  type="textarea"
                  v-model:value="data.tkForm.remark"
                  clearable
                  placeholder="请输入退款备注"
              />
            </NFormItem>
          </NForm>
        </div>


        <template #footer>
          <div style="width: 100%;display: flex;">
            <n-popconfirm @positive-click="create_tk()">
              <template #trigger>
                <n-button type="primary" size="large">
                  <TheIcon icon="material-symbols:add" :size="18" class="mr-5"/>
                  确认退款
                </n-button>
              </template>
              确定要退款吗？
            </n-popconfirm>
          </div>
        </template>

      </n-drawer-content>
    </n-drawer>
    <n-drawer v-model:show="data.show_tk_list" width="600px">
      <n-drawer-content title="退款记录" closable>
        <NInput size="large" @change="list_tk" v-model:value="data.keyword"  :loading="data.give_loading" clearable type="text" placeholder="请输入相关人姓名/病历号/手机号" style="margin-bottom: 20px"/>
        <n-spin :show="data.give_loading" style="--n-opacity-spinning:0.1;height: 100%">
        <n-card style="margin-bottom: 20px" v-for="item in data.tk_list" size="small" :segmented="{content: true,footer: 'soft',}">
          <template #header>
            <div style="display: flex; align-items: center;justify-content: flex-start">
              <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                <div style="display: flex">
                <n-button type="info" dashed size="large">退款单号:{{item.order_id}}</n-button>
              <div style="height:40px;width:300px;line-height:20px;margin-left: 10px">
                <span style="margin-right: 5px">
                  退{{ item.type === 1 ? '储值金' : '现金' }}<span style="font-size: 12px">X{{item.total_price}}</span>
                  <span style="float:right;color: #747586">退款人:{{item.user_name}}</span>
                </span>
                <br>
                <span style="font-size: 12px;">退款于:{{item.created_at}}</span>
                <span style="float:right;font-size: 12px;">退款方式 : <span style="color: #4CAF50">{{item.tkfs}}</span></span>
              </div>
                </div>
              </n-h6>
            </div>
          </template>
          <n-table :single-line="false">
              <thead>
                <tr>
                  <th>项目名称</th>
                  <th>退款单价</th>
                  <th>数量</th>
                  <th>总价</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item1 in item.select_tk_projects	">
                  <td>{{item1.name}}</td>
                  <td>{{item1.single_price}}</td>
                  <td>{{item1.nums}}</td>
                  <td>{{item1.nums*item1.single_price}}</td>
                </tr>
              </tbody>
            </n-table>

<!--          <template #header-extra>-->
<!--            <n-button type="primary" dashed disabled v-if="item.states_name==='已审核'">{{item.states_name}}</n-button>-->
<!--            <n-button type="info" v-else>{{item.states_name}}</n-button>-->
<!--          </template>-->

        </n-card>
        </n-spin>
      </n-drawer-content>
  </n-drawer>

  <!-- 今日营收抽屉 -->
  <n-drawer v-model:show="data.show_today" width="90%" placement="right">
    <n-drawer-content>
      <template #header>
        <div style="display:flex;justify-content: space-between;align-items: center;width: 100%;">
          <div>今日消费列表</div>
          <n-button type="primary" size="small" @click="exportTodayOrders">
            <TheIcon icon="material-symbols:download" :size="16" class="mr-5"/>导出
          </n-button>
        </div>
      </template>
      <n-spin :show="data.today_loading" style="--n-opacity-spinning:0.1;min-height: 400px;">
        <n-scrollbar style="max-height: calc(100vh - 200px);">
          <n-table :single-line="false" style="--n-th-color:#f8fafc;--n-td-color:#1f2937;--n-border-color:#eef2f7">
            <thead>
              <tr>
                <th style="width:110px">订单号</th>
                <th style="width:120px">下单客户</th>
                <th style="width:260px">商品名称</th>
                <th style="width:100px">商品明细</th>
                <th style="width:120px">订单原价</th>
                <th>订单总额</th>
                <th style="width:90px">整单折扣</th>
                <th style="width:100px">优惠合计</th>
                <th style="width:100px">实际付款</th>
                <th style="width:110px">整单优惠价</th>
                <th style="width:90px">积分抵扣</th>
                <th style="width:90px">储值抵扣</th>
                <th style="width:110px">赠送金抵扣</th>
                <th style="width:90px">卡券抵扣</th>
                <th style="width:140px">收款方式</th>
                <th style="width:140px">收款金额</th>
                <th style="width:160px">下单时间</th>
                <th style="width:100px">录入人员</th>
                <th style="width:140px">备注</th>
                <th style="width:200px">凭证</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="order in data.today_orders" :key="order.id">
                <td><n-tag size="small" type="info" dashed>{{ order.id }}</n-tag></td>
                <td>
                  <div style="display:flex;align-items:center;gap:8px;">
                    <NAvatar :src="order.user_avatar" style="width: 22px; height: 22px;border-radius:50%" />
                    <span>{{ order.user_name }}</span>
                  </div>
                </td>
                <td>
                  <n-ellipsis style="max-width: 260px" :line-clamp="1">
                    {{ (order.goods_arr || []).map(g=>g.title).join(' | ') }}
                  </n-ellipsis>
                </td>
                <td>
                  <n-button size="tiny" tertiary type="info" @click="toggleTodayExpanded(order.id)">
                    <TheIcon :icon="(data.today_expanded_ids||[]).includes(order.id) ? 'material-symbols:expand-less' : 'material-symbols:expand-more'" :size="16" class="mr-5"/>
                    {{ (data.today_expanded_ids||[]).includes(order.id) ? '收起' : '展开' }}
                  </n-button>
                </td>
                <td>¥ {{ fmtPrice(order.original_price ?? order.price) }}</td>
                <td><n-tag type="success" size="small">¥ {{ fmtPrice(order.price) }}</n-tag></td>
                <td>{{ order.zhekou ?? '' }}%</td>
                <td>¥ {{ fmtPrice(order.deduct_price ?? order.other?.deduct_total ?? 0) }}</td>
                <td><n-tag type="warning" size="small">¥ {{ fmtPrice(order.pay_money) }}</n-tag></td>
                <td>¥ {{ fmtPrice(order.other?.deduct ?? 0) }}</td>
                <td>¥ {{ fmtPrice(order.cdp_dk ?? 0) }}</td>
                <td>¥ {{ fmtPrice(order.weimei_dk ?? 0) }}</td>
                <td>¥ {{ fmtPrice(order.free_dk ?? 0) }}</td>
                <td>{{ order.other?.fujia ?? '' }}</td>
                <td><n-ellipsis style="max-width: 140px" :line-clamp="2">{{ (order.fkfs_arr || []).map(f=>f.fkfs).join(' | ') }}</n-ellipsis></td>
                <td><n-ellipsis style="max-width: 140px" :line-clamp="2">{{ (order.fkfs_arr || []).map(f=>`¥ ${fmtPrice(f.price)}`).join(' | ') }}</n-ellipsis></td>
                <td><n-time :time="new Date(order.created_at || order.day)" format="yyyy-MM-dd HH:mm:ss"/></td>
                <td>{{ order.butler }}</td>
                <td><n-ellipsis style="max-width: 140px" :line-clamp="2">{{ order.remark }}</n-ellipsis></td>
                <td>
                  <div style="display: flex; gap: 4px; flex-wrap: wrap;">
                    <n-image 
                      v-for="(img, index) in (order.water || [])" 
                      :key="index"
                      :src="img" 
                      style="width: 40px; height: 40px; border-radius: 4px; object-fit: cover;"
                      :preview-src="img"
                    />
                    <span v-if="!(order.water || []).length" style="color: #909399; font-size: 12px;">无凭证</span>
                  </div>
                </td>
              </tr>
              <tr v-for="order in data.today_orders" :key="'exp-'+order.id" v-show="(data.today_expanded_ids||[]).includes(order.id)">
                <td colspan="22">
                  <n-table :single-line="false" style="margin: 8px 0;background:#fafafa;">
                    <thead>
                      <tr>
                        <th style="width: 40%">商品名称</th>
                        <th style="width: 15%">数量</th>
                        <th style="width: 15%">折扣率</th>
                        <th style="width: 15%">商品金额</th>
                        <th style="width: 15%">应收</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="g in (order.goods_arr || [])" :key="g.id">
                        <td>{{ g.title }}</td>
                        <td>{{ g.num || 1 }}</td>
                        <td>{{ g.zhekou ?? '' }}%</td>
                        <td>{{ g.price ?? g.money ?? '' }}</td>
                        <td>{{ g.price ?? '' }}</td>
                      </tr>
                      <tr v-if="!(order.goods_arr||[]).length">
                        <td colspan="5" style="text-align: center; color:#909399;">无商品明细</td>
                      </tr>
                    </tbody>
                  </n-table>
                </td>
              </tr>
              <tr v-if="!data.today_loading && data.today_orders.length === 0">
                <td colspan="21" style="text-align: center; color:#909399;">暂无今日消费记录</td>
              </tr>
            </tbody>
          </n-table>
        </n-scrollbar>
      </n-spin>
    </n-drawer-content>
  </n-drawer>
  </AppPage>
</template>

<style scoped>
.info3 {
  margin: 0px 0;
  width: 100%;
  display: flex;
  padding: 20px;

  .data_card {
    width: 33%;
    height: 80px;
    background: rgba(200, 115, 115, 0.2);
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;

    .icon {
      margin-right: 20px;
      background: rgba(200, 115, 115, 1);
      padding: 3px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .con {
      line-height: 20px;
      font-size: 20px;
      color: rgba(200, 115, 115, 1);

      .tag {
        font-size: 12px;
        color: #000;
        font-weight: normal;
      }
    }
  }
}

.main_header2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background: rgba(117, 87, 145, 0.48);
  padding: 0 20px;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

  .tags {
    margin-right: 5px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
  }

  .info {
    height: 40px;
    line-height: 20px;

    .no {
      font-size: 12px;
    }

  }
}

.order_more {
  padding: 5px 20px;
  background: #f2f2f2;
  margin-right: 10px;
  border-radius: 5px;
  font-size: 12px;
}
</style>